<!DOCTYPE html>
<html lang="en">

<head>
<!-- 禁用浏览器缓存，防止出现刷新但是验证码不刷新的情况 -->
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />

    <title>验证码</title>
  <style>
    #inputCaptcha {
      height: 30px;
      vertical-align: middle; 
    }
    #verificationCodeImg{
      vertical-align: middle; 
    }
    #checkCaptcha{
      height: 40px;
      width: 100px;
    }
  </style>
</head>

<body>
  <h1>输入验证码</h1>
  <div id="confirm">
    <input type="text" name="inputCaptcha" id="inputCaptcha">
    <img id="verificationCodeImg" src="/captcha/getCaptcha" style="cursor: pointer;" title="看不清？换一张" />
    <input type="button" value="提交" id="checkCaptcha">
  </div>
  <script src="jquery-3.6.3.min.js"></script>
  <script>
<!-- 防止浏览器进行缓存  -->
    $("#verificationCodeImg").click(function () {
        $(this).hide().attr('src', '/captcha/getCaptcha?dt=' + new Date().getTime()).fadeIn();
    });
    $("#checkCaptcha").click(function(){
        $.ajax({
            type: "post",
            url: "/captcha/checkCaptcha",
            data: {
                captcha: $("#inputCaptcha").val()
            },
            success: function(result){
                if(result){
                    location.href = "success.html";
                }else {
                    alert("验证码错误, 请重新输入");
                }
            }
        });
    });

  </script>
</body>

</html>